<template>
  <div id="content">
    <ul class="foodList">
      <Foods
      v-for="item in foodsList"
      :key="item.id"
      :name="item.dish_name"
      :foodPrice="item.price"
      :img="item.pic"
      :recommend="item.is_recommend"
      :rate="item.recommend_rate"
      :introduce="item.introduce"
      >
        <!-- <template v-slot:addDish>
          <AddDish
          v-if="isOrder===index"
          @close="(val)=>{isOrder=val}"
          :title="item.dish_name"
          :price="item.price"
          :image="item.pic"
          :rate="item.recommend_rate"
          ></AddDish>
        </template> -->
      </Foods>
    </ul>
  </div>
</template>

<script>
import Foods from '@/components/Foods/foods.vue'
// import AddDish from '@/components/AddDish/addDish.vue'
import { getDishInfoAPI } from '@/api/dishInfoAPI.js'
export default {
  components: {
    Foods
    // AddDish
  },
  data () {
    return {
      foodsList: [],
      isOrder: -1
    }
  },
  methods: {
    async getRecommendDishes () {
      const token = localStorage.getItem('token')
      const { data: res } = await getDishInfoAPI(token)
      this.foodsList = res.data.filter(item => item.is_recommend)
    }
  },
  created () {
    this.getRecommendDishes()
  }
}
</script>

<style scoped>
#content{
    position: fixed;
    top: 80px;
    right: 20px;
    bottom: 20px;
    left: 300px;
    background: rgba(255, 255, 255, .2);

    box-sizing: border-box;
    padding: 10px;

    overflow: hidden;
}

/* .foodList{
    font-size: 0;
} */

</style>
